Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

203
Vistas
I try to delete a targeted element front-end side and have it removed from the db as well but doesn't work [Vue.js + vuetify + firestore]

I created a to-do list kind of app that is connected to a db on firestore.

I have a form that adds a new document to the list, both front-end and db and it works,

I have a method that listens to the changes in the db and updates the document in the browser and it works.

So I see that I manage to refer to the collection in the db and save it in variables, but it is only reactive to deleting documents if I do it manually from firebase website.

Here is the method that I am trying to use

  removeObject(id){
    const db = getFirestore(app);
      console.log("test")
     deleteDoc(doc(db, "Listify", doc(id));
  }

And here is the way I'm calling it in HTML

    <v-card  flat v-for="project in projects" :key="project.id">
      <v-layout row justify-end wrap :class="`pa-3 project ${project.status}`">
        ...
        ...
        <v-flex xs6 sm4 md2  class="text-center-xs">
          <div class="right text-center">
            <v-chip small :class="`${project.status} white--text caption my-2`"> {{project.status}}</v-chip>
            <v-btn flat fab small dark class="red" @click="removeObject(project.id)"> 
               <v-icon small class="pa-0">delete</v-icon>
            </v-btn>
          </div>
        </v-flex>
      </v-layout>
        <v-divider></v-divider>

    </v-card>

I tried to refer to the doc id in the method in many ways, but it only works when I hard code the id for that document, and even in that case it deletes the last item of the array "projects" that I defined in the data section of the app, and then when I refresh the page, that last item comes back and the one with the id that I hardcoded is actually deleted.

I tried calling "removeObject(id)" as async and use await on "deleteDoc(.....)" but still does not work,

I thought about looping the collection but I would not know the right way to do it, and finally in firebase official repo in githhub I only found this syntax "await deleteDoc(doc(db, "cities", "DC"));"

Which did not help me as it only works with specific Ids or doc names;

How could I delete, clicking on the button that calls the delete method, remove that specific item I targeted both client and db side?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda